<template>
  <div class="interview-skills">
    <div class="hm-mm-top" style='display:flex;justify-content: space-between;'>
      <!-- 左边输入搜索 -->
      <div class="hm-mm-top-left">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="用户名">
            <el-input v-model.trim="formSearch_username" placeholder="根据用户名搜索" style="width:280px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click='clearMsg'>清空</el-button>
            <el-button type="primary" @click="SearchOnSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 右边新增用户 -->
      <div class="hm-mm-top-right">
       <el-button type="success" @click="Visible"><i class="el-icon-edit" style="margin-right: 10px;"></i>新增用户</el-button>
      </div>
    </div>
    <el-alert type="info" style="width: 99%;margin: 0 auto;" :closable='false'>
      <i class="el-icon-info"/>&nbsp;&nbsp;共&nbsp;{{DataNum}}&nbsp;条记录
    </el-alert>
    <!-- 列表 -->
    <div class="hm-mm-list" style="width: 100%">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="150" align='center'></el-table-column>
        <el-table-column prop="email" label="邮箱" width="300" align='center'>
          <template #default='{row}'>
            {{row.email}}
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="" align='center'>
          <template #default='{row}'>
            {{row.phone||34245}}
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="" align='center'></el-table-column>
        <el-table-column prop="permission_group_title" label="权限组名称" width="" align='center'></el-table-column>
        <el-table-column prop="role" label="角色" width="" align='center'></el-table-column>
        <el-table-column label="操作" width="" align='center'>
          <template #default="{row}">
           <el-button type="primary" icon="el-icon-edit" circle @click='recompose(row)'></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next, sizes, jumper" :total="totalPages" :page-sizes="[5, 10, 20, 50]" style="float: right;margin-right: 10px;margin-top: 20px;"
      @current-change="handleCurrentChange" @size-change="handleSizeChange"></el-pagination>
    </div>
    <!-- 用户对话框 -->
    <el-dialog :title="title" :visible.sync="articledialogVisible" width="800px" @close='dialogclose'>
      <el-form :model="formData" status-icon :rules="rules" ref="formData" label-width="150px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input type="text" v-model="formData.username" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input type="text" v-model="formData.email" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" v-show="title!=='编辑用户'">
          <el-input v-model="formData.password" show-password style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-input v-model="formData.role" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="权限组名称" prop="permission_group_id">
         <el-select v-model="formData.permission_group_id" placeholder="请选择" style="width:350px">
           <el-option v-for="item in permission_group_options" :key="item.id" :label="item.title" :value="item.id">
           </el-option>
         </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="formData.phone" style="width:350px"></el-input>
        </el-form-item>
        <el-form-item label="介绍" prop="introduction">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="formData.introduction" style="width:350px">
          </el-input>
        </el-form-item>
        <el-form-item class="dialog-footer">
          <el-button @click="articledialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, update } from '@/api/base/users'
import { simple } from '@/api/base/permissions'
import DataBar from '@/components/DataBar'
export default {
  created(){
    this.getlist({page:this.pageChange,pagesize:this.pagesizeChange,username:''})
  },
  components:{
    DataBar
  },
  data () {
    return {
      formSearch_username:'',
      DataNum:0,//数据一共多少条
      tableData: [],//列表渲染数据
      totalPages:10,
      pageChange:1,//页数变化
      pagesizeChange:10,//页面尺寸变化
      articledialogVisible:false,//文章弹出对话框
      id:'',
      formData:{
        avatar:'',
        email:'',
        introduction:'',
        password:'',
        permission_group_id:'',
        phone:'',
        role:'',
        username:'',
      },//用户弹出对话框绑定的数据
      permission_group_options:[],//用户弹出对话框//权限组名称
      title:'',//用户弹出对话框标题s
      rules:{
        username:[
      { required:true,message:'用户名不能为空',trigger:'blur'},
      { required:true,pattern: /^(?!\s+).*(?<!\s)$/,  message: '用户名首尾不能为空格', trigger: 'blur' }
      ],
        email:[
      { required:true,message:'邮箱不能为空',trigger:'blur'},
      { required:true,pattern: /^(?!\s+).*(?<!\s)$/,  message: '邮箱首尾不能为空格', trigger: 'blur' }
      ],
        password:[
      { required:true,message:'密码不能为空',trigger:'blur'},
      { required:true,pattern: /^(?!\s+).*(?<!\s)$/,  message: '密码首尾不能为空格', trigger: 'blur' }
      ]
      },
    }
  },
  methods: {
    //#渲染函数
    async getlist(params){
      this.tableData=[]
      const {data}=await list(params)
      console.log(data);
      this.DataNum=data.counts//数据一共多少条
      this.totalPages=data.pages*this.pagesizeChange
      data.list.forEach((item) => {
        this.tableData.push(item)
      });
      console.log(this.tableData);
    },
    //#搜索功能
    SearchOnSubmit() {
      this.getlist({page:this.pageChange,pagesize:this.pagesizeChange,username:this.formSearch_username})
    },
    clearMsg(){
      this.formSearch_username=''
    },
    async Visible(){
      this.title='创建用户'
      this.articledialogVisible=true
      const {data}=await simple()
      this.permission_group_options=data
      console.log(this.permission_group_options);
    },
    //#底部页数切换功能
    //页数变化
    handleCurrentChange(value){
      this.pageChange=value
      this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
    },
    //页面尺寸发生变化
    handleSizeChange(value){
      this.pagesizeChange=value
      this.getlist({page:this.pageChange,pagesize:this.pagesizeChange})
    },
    //#弹出框功能
    //关闭弹出窗口_重置校验
    dialogclose(){
      this.$refs.formData.resetFields()
      this.formData={
        avatar:'',
        email:'',
        introduction:'',
        password:'',
        permission_group_id:'',
        phone:'',
        role:'',
        username:'',
      }
    },
    //确定按钮
    async confirm(){
      this.$refs.formData.validate()
      if(this.title==='创建用户'){
        try {
          const res = await add(this.formData)
          console.log(res);
          this.$message.success('操作成功')
          this.articledialogVisible = false
          this.getlist({page:this.pageChange,pagesize:this.pagesizeChange,username:this.formSearch_username})
        } catch (error) {
          console.log(error);
        }
      }else if(this.title==='编辑用户'){
        this.formData.id=this.id
        try {
          await update(this.formData)
          this.$message.success('操作成功')
          this.articledialogVisible = false
          this.getlist({page:this.pageChange,pagesize:this.pagesizeChange,username:this.formSearch_username})
        } catch (error) {
          console.log(error);
        }
      }
    },
    //#编辑修改功能
    async recompose(row){
      const {data}=await simple()
      this.permission_group_options=data
      this.formData.email=row.email
      this.formData.introduction=row.introduction
      this.formData.password=row.password
      this.formData.permission_group_id=row.permission_group_id
      this.formData.phone=row.phone
      this.formData.role=row.role
      this.formData.username=row.username
      this.title='编辑用户'
      this.articledialogVisible = true
      this.id=row.id
    },
  }
}
</script>

<style scoped lang='scss'>
.interview-skills{
  margin: 0 auto;
  background-color: #fff;
  width: 99%;
  border: 1px solid #d8dce5;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  padding: 20px;
  padding-bottom: 80px;
  .hm-mm-list{
    margin-top: 20px;
  }
  .hm-mm-top{
    margin-top: 10px;
    .hm-mm-top-left{
      margin-left: 25px;
    }
    .hm-mm-top-right{
      margin-right: 10px;
    }
  }
  ::v-deep .dialog-footer{
   .el-form-item__content{
    text-align: center;
    margin-right: 100px;
    margin-top: 50px;
   }
  }
  ::v-deep .cell{
     .el-button--primary{
      color: #409eff !important;
      background: #ecf5ff !important;
      border-color: #b3d8ff !important;
    }
    .el-button--primary:hover{
      color: #ecf5ff !important;
      background: #409eff !important;
    }
  }
}
</style>

